<template>
  <div class="view-wrapper">
		<div class="tabs-body">
			<div class="main_top">
				<div class="lef">
					<div class="" v-for="item in typeList" :class="['list', currentNavtab == item.id ? 'active' : '']" :key="item.id"
						:value="item.id" @click="handleTab(item.id)">
						{{ item.value }} 
					</div>
				</div>
			</div>
			<div class="table">
				<indexMain v-if="currentNavtab == 0" ></indexMain>
				<voucherCollection v-if="currentNavtab == 1" ></voucherCollection >
			</div>
		</div>
  </div>

</template>

<script>
	import indexMain from './tabBox/index_main'
	import voucherCollection from './tabBox/voucher_collection'
  export default {
    name: "Customer",
    components: {
		indexMain,
		voucherCollection
    },
    data() {
      return {
        currentNavtab: 0,
		typeList: [
			{id: 0,value: '卡优优首页'},
			{id: 1,value: '领劵中心'},
		],
      };
    },
    created() {
     
    },
    methods: {
			//切换选项
			handleTab(id) {
				this.currentNavtab = id
			},
		}
  };

</script>
<style lang="scss" scoped>
.tabs-body {
  background-color: #fff;
  padding: 20px;
}
.main_top{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	font-size: 14px;
	color: #333;
	.lef{
			display: flex;
			justify-content: flex-start;
			margin-bottom: 18px;
			border: 1px solid #dfe6ec;
			.list{
					width: 104px;
					height: 36px;
					text-align: center;
					line-height: 36px;
					border-right: 1px solid #dfe6ec;
			}
			.list:nth-last-child(1){
					border: none;
			}
			.active{
					background: #1890ff;
					color: #fff;
			}
	}
}

</style>
